<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的使用</title>
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            display: flex;
            flex-direction: column;
        }
        a{
            text-decoration: none;
            color: black;
        }

        h1,h2{
            font-size: 14px;
            font-weight: 400;
        }
        h3{
            color: rgb(65, 65, 65);
            font-size: 18px;
        }
        li{
            background-color: azure;
        }
        .li-item{
            padding: 0 10px;
        }
        .content{
            width: 100%;
            margin-top: 10px;
            /* background-color: aqua; */
            display: flex;
            position: relative;
            /* align-items: center; */
            /* border-bottom: 1px solid black; */
        }
        .content img{
            width: 80px;
            height: 120px;
            margin-top: 10px;
        }
        .more_content{
            width: 80%;
            height: 100%;
            padding: 10px;
            font-size: 14px;
            color: rgb(137, 137, 137);
        }

        
        .more_content_see{
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid rgb(240, 240, 240);
            /* margin-bottom: 2px; */
            /* justify-content: space-around; */
            padding-bottom: 10px;
        }
        .more_content_see span{
            margin-bottom: 10px;
        }
        .more_content_see span:first-child{
            margin-top: 8px;
        }

        .person_num{
            font-size: 14px;
            color: rgb(250, 175, 0);
        }

        .want{
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -14px;
        }
        button{
            width: 52px;
            height: 28px;
            outline: none;
            border: none;
            border-radius: 18px;
            color: #fff;
            font-size: 12px;
            background-color: rgb(250, 175, 0);
        }
        .stars{
            width: 190px;
            /* height: 18px; */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div id="main">
        <ul>
            <li v-for="(item,index) in arr" :key = "item.id">
                <a href="#">
                    <div class="li-item">
                        <h2 v-if="index ==0 || arr[index].comingTitle != arr[index-1].comingTitle">{{item.comingTitle}}</h2>
                        <div class="content">
                            <img :src="item.img" alt="">
                            <div class="more_content">
                                <h3>{{item.nm}}</h3>
                                <div class="more_content_see">
                                    <span><span class="person_num">{{item.wish}}</span>人想看</span>
                                    <span class="stars">主演：{{item.star}}</span>
                                    <span>{{item.rt}}上映</span>
                                </div>
                            </div>
                            <button class="want">想看</button>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <script>
        let main = new Vue({
            el:"#main",
            data:{
                arr:[ {
                    "id": 1298049,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69a030338ddd2300b1f3b191305438ba.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "密室逃生2",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 32538,
                    "star": "泰勒·拉塞尔,洛根·米勒,霍兰·罗登",
                    "rt": "2022-04-02",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月2日 周六"
                },
                {
                    "id": 1263216,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69a8eac7e7a3539dd3abbabc299e2f10.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "精灵旅社4：变身大冒险",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 125727,
                    "star": "布赖恩·哈尔,安迪·萨姆伯格,赛琳娜·戈麦斯",
                    "rt": "2022-04-03",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月3日 周日"
                },
                {
                    "id": 1442177,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69ab53c7e281e395b442d4e5cb572e45.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "草原大作战",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 2513,
                    "star": "陈喆,吉吉,张碧玉",
                    "rt": "2022-04-03",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月3日 周日"
                },
                {
                    "id": 522013,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69ad7cdddd2368ea330e1cfd760cd4ab.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "神奇动物:邓布利多之谜",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 250097,
                    "star": "埃迪·雷德梅恩,艾莉森·苏朵儿,裘德·洛",
                    "rt": "2022-04-08",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月8日 周五"
                },
                {
                    "id": 1358211,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69ac69c7e71f72ff77ac412636a783c1.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "诺亚方舟漂流记2",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 1982,
                    "star": "Max Carolan,德莫特·麦金尼斯,艾娃·康纳利",
                    "rt": "2022-04-08",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月8日 周五"
                },
                {
                    "id": 1250907,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69af2a51b9235338ffac055255b49f5d.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "致我的陌生恋人",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 3421,
                    "star": "弗朗索瓦·西维尔,约瑟芬·约比,本杰明·拉维赫尼",
                    "rt": "2022-04-14",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月14日 周四"
                },
                {
                    "id": 1429716,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69abe15bf11e5030c7fe2299da39cf94.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "人间世",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 28581,
                    "star": "许烈英,王思蓉,刘子涵",
                    "rt": "2022-04-15",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月15日 周五"
                },
                {
                    "id": 1359726,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69a5370fabe129ab47ff0db0d09672eb.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "边缘行者",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 21623,
                    "star": "任贤齐,任达华,方中信",
                    "rt": "2022-04-15",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月15日 周五"
                },
                {
                    "id": 341284,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69a8ea0faaf3317899b6db70c87848f3.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "误杀瞒天记",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 5113,
                    "star": "阿贾耶·德乌干,塔布,施芮娅·萨兰",
                    "rt": "2022-04-15",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月15日 周五"
                },
                {
                    "id": 1287309,
                    "haspromotionTag": false,
                    "img": "https://p0.pipi.cn/mmdb/25bfd69ac69807f0ee230fd4713cd7de617a4.jpg?imageMogr2/thumbnail/2500x2500%3E",
                    "version": "",
                    "nm": "遇见你之后",
                    "preShow": false,
                    "sc": 0,
                    "globalReleased": false,
                    "wish": 3864,
                    "star": "黄尧,刘迅,付美",
                    "rt": "2022-04-15",
                    "showst": 1,
                    "wishst": 0,
                    "comingTitle": "4月15日 周五"
                }]
            }
        }) 
        
    </script>
</body>
</html>